<template>
	<div>
		<!-- 收费详情、退费详情弹窗 -->
		<div class="chargespopup">
			<div class="row">
				<span class="title">{{parentData.title.row1}}</span>
			</div>
			<div class="row">
				<div class="txtbox">
					<span class="label">{{parentData.studentInfo.row1_clo1.name}}</span>
					<span class="value">{{parentData.studentInfo.row1_clo1.value}}</span>
				</div>
				<div class="txtbox">
					<span class="label">{{parentData.studentInfo.row1_clo2.name}}</span>
					<span class="value">{{parentData.studentInfo.row1_clo2.value}}</span>
				</div>
				<div class="txtbox">
					<span class="label">{{parentData.studentInfo.row1_clo3.name}}</span>
					<span class="value">{{parentData.studentInfo.row1_clo3.value}}</span>
				</div>
				<div class="txtbox">
					<span class="label">{{parentData.studentInfo.row1_clo4.name}}</span>
					<span class="value">{{parentData.studentInfo.row1_clo4.value}}</span>
				</div>
				<div class="txtbox" v-if="parentData.studentInfo._createTime">
					<span class="label">操作时间：</span>
					<span class="value">{{parentData.studentInfo._createTime}}</span>
				</div>
			</div>
			<div class="row">
				<div class="txtbox">
					<span class="label">{{parentData.studentInfo.row2_clo1.name}}</span>
					<span class="value">{{parentData.studentInfo.row2_clo1.value}}</span>
				</div>
				<div class="txtbox" v-if="parentData.studentInfo.row2_clo2.visible">
					<span class="label">{{parentData.studentInfo.row2_clo2.name}}</span>
					<span class="value">{{parentData.studentInfo.row2_clo2.value}}</span>
				</div>
				<!-- <div class="txtbox" v-if="parentData.studentInfo.row2_clo3">
					<span class="label">{{parentData.studentInfo.row2_clo3.name}}</span>
					<span class="value">{{parentData.studentInfo.row2_clo3.value}}</span>
				</div>
				<div class="txtbox" v-if="parentData.studentInfo.row2_clo4" style="white-space: nowrap;">
					<span class="label">{{parentData.studentInfo.row2_clo4.name}}</span>
					<span class="value">{{parentData.studentInfo.row2_clo4.value}}</span>
				</div> -->
			</div>
			<div class="row">
				<span class="title">{{parentData.title.row2}}</span>
			</div>
			<div class="row table">
				<div class="table" style="width:100%;">
					<template >
						<el-table
							:data="parentData.tableObj.table.tbody"
							max-height="350"
							style="width: 100%">
							<!--v-if="parentData.tableObj.type=='报名收费'||parentData.tableObj.type=='商品收费'"-->
							<el-table-column 
								class-name='cloumn-type'
								key="classmode"
								prop="classmode"
								align="center"
								label=""
								width="50">
								<template slot-scope="scope">
									<span class="type">{{scope.row.classmode}}</span>
								</template>
							</el-table-column>
							<el-table-column 
								v-for="row in parentData.tableObj.table.thead"
								:key="row.propName"
								:prop="row.propName"
								align="center"
								:label="row.labelNmae">
							</el-table-column>
						</el-table>
					</template>
				</div>
				<div class="statisticsBox">
					<div class="item primary">
						<span class="label">{{parentData.tableObj.statistics.row1.name}}</span>
						<span class="value">￥{{parentData.tableObj.statistics.row1.value}}</span>
					</div>
					<div class="item actual">
						<span class="label">{{parentData.tableObj.statistics.row2.name}}</span>
						<span class="value">￥{{parentData.tableObj.statistics.row2.value}}</span>
					</div>
					<div class="item deposit" v-if="parentData.tableObj.statistics.row3.visible">
						<span class="label">{{parentData.tableObj.statistics.row3.name}}</span>
						<span class="value">￥{{parentData.tableObj.statistics.row3.value}}</span>
					</div>
				</div>
			</div>
			<div class="row line"></div>
			<div class="row">
				<span class="otherinfo">其他信息</span>
			</div>
			<div class="row" v-show="parentData.otherIfo.row5.value!==-1">
				<div class="txtbox fill">
					<span class="label">{{parentData.otherIfo.row5.name}}</span>
					<span class="value">{{parentData.otherIfo.row5.value}}</span>
				</div>
			</div>
			<div class="row" v-show="parentData.otherIfo.row6.value!==-1&&parentData.otherIfo.row6.value">
				<div class="txtbox fill">
					<span class="label">{{parentData.otherIfo.row6.name}}</span>
					<span class="value">{{parentData.otherIfo.row6.value}}</span>
				</div>
			</div>
			<div class="row" v-if="parentData.operationType==1">
				<div class="txtbox fill">
					<span class="label">{{parentData.otherIfo.row7.name}}</span>
					<span class="value">{{parentData.otherIfo.row7.value}}</span>
				</div>
			</div>
			<div class="row">
				<div class="txtbox fill">
					<span class="label">{{parentData.otherIfo.row1.name}}</span>
					<span class="value">{{parentData.otherIfo.row1.value}}</span>
				</div>
			</div>
			<div class="row">
				<div class="txtbox fill">
					<span class="label">{{parentData.otherIfo.row2.name}}</span>
					<span class="value">{{parentData.otherIfo.row2.value}}</span>
				</div>
			</div>
			<div class="row">
				<div class="txtbox fill">
					<span class="label">{{parentData.otherIfo.row3.name}}</span>
					<span class="value">{{parentData.otherIfo.row3.value}}</span>
				</div>
			</div>
			<div class="row">
				<div class="txtbox fill">
					<span class="label">{{parentData.otherIfo.row4.name}}</span>
					<span class="value">{{parentData.otherIfo.row4.value}}</span>
				</div>
			</div>
			<div class="row" style="margin-top:0.3rem;"  v-if="parentData.operationType==2">
				<div class="row" v-if="parentData.moneyType.includes('收费')" style="justify-content:center;">
					<el-button class="resetElement" type="primary" style="width:1.5rem;" @click="cancel">取消</el-button>
					<el-button class="resetElement" type="primary" style="width:1.5rem;" @click="checkPayOrders">确定</el-button>
				</div>
				<div class="row" v-else-if="parentData.moneyType.includes('退费')" style="justify-content:center;">
					<el-button class="resetElement" type="primary" style="width:1.5rem;" @click="cancel">取消</el-button>
					<el-button class="resetElement" type="primary" style="width:1.5rem;" @click="cancelRefundPopup.visible = true">退款驳回</el-button>
					<el-button class="resetElement" type="primary" style="width:1.5rem;" @click="checkRefundOrders">同意退款</el-button>
				</div>
			</div>
			
		</div>
		<!-- 退款驳回弹窗 -->
		<div class="cancelRefundPopup" v-show="cancelRefundPopup.visible">
			<div class="incontent">
				<span class="title">请输入驳回原因：</span>
				<el-input
					type="textarea"
					resize="none"
					:rows="4"
					placeholder="请输入原因"
					style="margin: 0.1rem 0;"
					v-model="cancelRefundPopup.reason">
				</el-input>
				<span class="footer">
					<el-button class="resetElement" type="primary" style="width:1.2rem;" @click="cancelRefundPopup.visible = false">取 消</el-button>
					<el-button class="resetElement" type="primary" style="width:1.2rem;" @click="cancelRefundOrders">提交原因</el-button>
				</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		props:['chargespopup'],
		data(){
			return {
				parentData:this.chargespopup,
				cancelRefundPopup:{
					visible:false,
					reason:''
				}
			}
		},
		methods:{
			/**初始化*/
			init(data){
			},
			updateByData(data){
				this.parentData=data;
				this.cancelRefundPopup.visible=false;
			},
			cancel(){
				this.cancelRefundPopup.visible=false;
				this.$emit('hideMe');
			},
			success(){
				this.$emit('success');
			},
			/**收费审核 */
			checkPayOrders(){
				let self=this;
				api.setAuditOrder({orderSigupId:this.parentData.otherIfo.row5.value})
				.then(function(d){
					// console.log(d);
					if(d.result=='操作成功'){
						self.$message({
							message: '操作成功！',
							type: 'success'
						});
						self.cancel();
						self.success();
					}
					
				});
			},
			/**退费审核 */
			checkRefundOrders(){
				let self=this;
				api.setRefundAuditOrder({orderRefundId:this.parentData.otherIfo.row5.value,
				orderRefundState:1})
				.then(function(d){
					// console.log(d);
					if(d.result=='操作成功'){
						self.$message({
							message: '操作成功！',
							type: 'success'
						});
						self.cancel();
						self.success();
					}
					
				});
			},
			/**驳回退费 */
			cancelRefundOrders(){
				let self=this;
				api.setRefundAuditOrder({orderRefundId:this.parentData.otherIfo.row5.value,
				orderRefundState:2,
				sRemark:this.cancelRefundPopup.reason})
				.then(function(d){
					// console.log(d);
					if(d.result=='操作成功'){
						self.$message({
							message: '操作成功！',
							type: 'success'
						});
						self.cancel();
						self.success();
					}
					
				});
			}
		},
		mounted(){
		},
		computed:{
			
		},
		watch:{

		},
		created : function() {
			// console.log(this.parentData)
		}
	}
</script>

<style lang="scss">
	.chargespopup{
		padding: 0 0.04rem 0.2rem 0.04rem;
		font-size: 0.16rem;
		// color: #333333;
		.row{
			width: 100%;
			display: flex;
    		margin-top: 0.05rem;
			.title{
				font-size: 0.18rem;
				color: #333333;
				font-weight: bold;
			}
			.otherinfo{
				font-size: 0.18rem;
				color: #333333;
				font-weight: bold;
			}
			.txtbox{
				width: 25%;
				.label{

				}
				.value{
					
				}
			}
			.txtbox.fill{
				width: 100%;
			}
			.table{
				.el-table__header-wrapper{
					.el-table__header thead{
						color: #666666 !important;
						font-size: 0.16rem !important;
					}
				}
				.el-table__body-wrapper{
					.el-table__row{
						.cell{
							white-space: pre-line !important;
							font-size: 0.16rem !important;
						}
					}
					.cloumn-type{
						.type{
							display: block;
							height: 0.2rem;
							line-height: 0.2rem;
							font-size: 0.12rem;
							background-color: #3885F8;
							color: white;
							border-radius: 0.05rem;
							width: 0.35rem;
							padding: 0 0.05rem;
							text-align: center;
						}
					}
				}
			}
			.statisticsBox{
				width: 100%;
				text-align: right;
				.primary{
					// font-size: 0.16rem;
				}
				.actual{
					.value{
						// font-size: 0.22rem;
						font-weight: 600;
						// color: red;
					}
				}
				.deposit{
					// font-size: 0.14rem;
				}
			}
		}
		.row.line{
			width: 100%;
			height: 1px;
			border-top: 0.005rem solid #6666667d;
		}
		.row.table{
			flex-wrap: wrap;
		}
		// 滚动条
		.el-table__body-wrapper::-webkit-scrollbar {
			width: 0.05rem;
		}
		.el-table__body-wrapper::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.el-table__body-wrapper::-webkit-scrollbar-track {
			background: #F2F6FC;
		}

		
	}
	// 驳回弹窗
	.cancelRefundPopup{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 3000;
		display: flex;
		justify-content: center;
		align-items: center;
		.incontent{
			width: 5.5rem;
			height: 2.5rem;
			background: #FFFFFF;
			box-shadow: 0 0.01rem 0.03rem rgba(0, 0, 0, 0.3);
			border-radius: 0.1rem;
			padding: 0.2rem 0.3rem;
			.title{
				width: 100%;
				font-size: 0.2rem;
				font-weight: bold;
			}
			.footer{
				display: flex;
    			justify-content: center;
			}
			.el-textarea__inner{
				font-size: 0.18rem;
			}
		}
		
	}
	// 滚动条
	.chargespopup::-webkit-scrollbar {
		width: 0.05rem;
	}
	.chargespopup::-webkit-scrollbar-thumb {
		border-radius: 0.5rem;
		background: #BBBBBB;
	}
	.chargespopup::-webkit-scrollbar-track {
		background: #F2F6FC;
	}
</style>